<html style="--main-bg-color: rgba(247,244,237,1); --main-txt-color: rgba(49,50,44,1); --main-hl-color: rgba(254,204,17,1); --main-normal-color: rgba(49,50,44,1);"><head>
    <meta charset="utf-8">
    <title>test</title>
    
    <style type="text/css">
    

/* Variables */
/* Fonts */
/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700); */
//打印机媒体查询
@media print {
     body{
        -webkit-print-color-adjust:exact;
        -moz-print-color-adjust:exact;
        -ms-print-color-adjust:exact;
        print-color-adjust:exact;
    } 
    button{display:none;}
    .custom-context-menu{display:none;}
    
}

:root {
  --main-bg-color: #f7f4ed;
  --main-txt-color: #31322c;
  --main-hl-color: #fecc11;
  --main-normal-color: #31322c;
}

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background-color: var(--main-bg-color);
}

/* Layout */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Styling */
.timeline {
  margin: 4em auto;
  position: relative;
  max-width: 90em;
}
.timeline:before {
  background-color: var(--main-txt-color);
  content: '';
  margin-left: 1em;
  position: absolute;
  top: 0;
  left: 3.44em;
  width: 2px;
  height: 100%;
}

.timeline-event {
  position: relative;
}

@media only screen {
	.timeline-event:hover .timeline-event-icon {
  		-moz-transform: rotate(-45deg);
  		-ms-transform: rotate(-45deg);
  		-webkit-transform: rotate(-45deg);
  		transform: rotate(-45deg);
  		background-color: #801dae;
	}
	
	.timeline-event:hover .timeline-event-thumbnail {
  		-moz-box-shadow: inset 40em 0 0 0 #801dae;
  		-webkit-box-shadow: inset 40em 0 0 0 #801dae;
  		box-shadow: inset 40em 0 0 0 #801dae;
	}
}

.timeline-event-copy {
  padding-left: 1.5em;
  padding-right: 1.5em
  padding-top: 1em;
  padding-bottom: 0em;
  position: relative;
  top: -0.5em;
  left: 2em;
  width: 80%;
}
.timeline-event-copy h3 {
  font-size: 1.5em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
.timeline-event-copy h4 {
  font-size: 1.2em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.timeline-event-copy h5 {
  font-size: 1.1em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
.timeline-event-copy strong {
  font-weight: 700;
}
.timeline-event-copy p:not(.timeline-event-thumbnail) {
  padding-bottom: 0.1em;
}

.timeline-event-icon {
  -moz-transition: -moz-transform 0.2s ease-in;
  -o-transition: -o-transform 0.2s ease-in;
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: var(--main-txt-color);
  outline: 10px solid var(--main-bg-color);
  display: block;
  margin: 0.5em 0.5em 0.5em -0.5em;
  position: absolute;
  top: 0;
  left: 2em;
  width: 1em;
  height: 1em;
}

.timeline-event-thumbnail {
  -moz-transition: box-shadow 0.5s ease-in 0.1s;
  -o-transition: box-shadow 0.5s ease-in 0.1s;
  -webkit-transition: box-shadow 0.5s ease-in;
  -webkit-transition-delay: 0.1s;
  transition: box-shadow 0.5s ease-in 0.1s;
  color: white;
  font-size: 0.75em;
  background-color: var(--main-txt-color);
  -moz-box-shadow: inset 0 0 0 0em #bf242a;
  -webkit-box-shadow: inset 0 0 0 0em #bf242a;
  box-shadow: inset 0 0 0 0em #bf242a;
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 0.25em 1em 0.2em 1em;
}

#listContent>li::marker {
  content: '';
}

.custom-context-menu>li::marker {
  content: '';
}

.timeline-event-disable {
	position: relative;
}
.timeline-event-disable:hover .timeline-event-icon-disable {

}

.timeline-event-disable:hover .timeline-event-thumbnail-disable {

}

.timeline-event-icon-disable {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: var(--main-txt-color);
  outline: 10px solid var(--main-bg-color);
  display: block;
  margin: 0.5em 0.5em 0.5em -0.5em;
  position: absolute;
  top: 0;
  left: 2em;
  width: 1em;
  height: 1em;
}

.timeline-event-thumbnail-disable {
  color: white;
  font-size: 0.75em;
  background-color: var(--main-txt-color);
  -moz-box-shadow: inset 0 0 0 0em #bf242a;
  -webkit-box-shadow: inset 0 0 0 0em #bf242a;
  box-shadow: inset 0 0 0 0em #bf242a;
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 0.25em 1em 0.2em 1em;
}

.mkd strong {
  background-color: var(--main-hl-color);
}

    ﻿@charset "UTF-8";
.mkd {
  color: #595959;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  line-height: 1.8em;
  background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.05) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, 0.05) 3%, transparent 0);
  background-size: 20px 20px;
  background-position: 50%;
  word-break: break-all;
  /* 颜色配置 */
  /* 颜色配置 end */
  /* 布局，一般不需要改动 */
  /* 布局 end */
  /* 任务列表 */
  /* 任务列表 end */
  /* 代码块框架 */
  /* 代码语法高亮 CodeMirror */
  /* 代码语法高亮 end */
}
.mkd * {
  box-sizing: border-box;
}
.mkd blockquote {
  margin-left: 0;
  background-color: #ebf4ff;
  border-color: #22355e;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #1a2847;
}
.mkd strong {
  color: #1a2847;
/* #1a2847 */
}
.mkd code,
.mkd a {
  color: #1a2847;
}
.mkd a {
  border-color: #667eea;
}
.mkd code {
  background-color: #ebf4ff;
}
.mkd blockquote,
.mkd details,
.mkd dl,
.mkd ol,
.mkd p,
.mkd pre,
.mkd table,
.mkd ul {
  margin-bottom: 1rem;
}
.mkd ol {
  list-style: decimal;
}
.mkd ul {
  list-style: disc;
}
.mkd ol,
.mkd ul {
  padding-left: 2em;
}
.mkd h1,
.mkd h2 {
  border-color: #1a2847;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  font-weight: 500;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
}
.mkd h1,
.mkd h2 {
  border-bottom: 1px solid #eaecef !important;
  border-left-width: 6px;
}
.mkd h1,
.mkd h2,
.mkd h3,
.mkd h4,
.mkd h5,
.mkd h6 {
  margin-bottom: 16px;
  line-height: 1.25;
}
.mkd blockquote {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-left: 0.25em solid;
}
.mkd blockquote > :last-child {
  margin-bottom: 0;
}
.mkd blockquote > :first-child {
  margin-top: 0;
}
.mkd strong {
  font-weight: bold;
}
.mkd strong::before {
  content: "「";
}
.mkd strong::after {
  content: "」";
}
.mkd code,
.mkd a {
  font-weight: 500;
}
.mkd code,
.mkd a {
  font-size: unset;
}
.mkd a {
  text-decoration: none;
  border-bottom: 1px solid;
}
.mkd .footnote-ref {
  border-width: 0px;
}
.mkd code {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
.mkd pre > code {
  font-weight: 400;
  color: unset;
  line-height: 1.6;
}
.mkd picture img {
  border-radius: 6px;
  display: block;
  margin: 10px auto;
  -o-object-fit: contain;
  object-fit: contain;
  box-shadow: 2px 4px 7px #999;
}
.mkd img {
  max-width: 100%;
  display: block;
  margin: 10px auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 2px 4px 7px #999;
}
.mkd picture {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 6px;
}
.mkd mark{
  background-color: #f8bc31;
}
.mkd .svg-markmap-box {
  min-height: 20rem;
  width: 100%;
}
.mkd .footnotes {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.mkd .task-list-item {
  padding-left: 0.3rem;
  list-style-type: none;
}
.mkd .task-list-item > p {
  transition: color 0.3s, opacity 0.3s;
}
.mkd .task-list-item.task-list-done > p {
  color: #525252;
  text-decoration: line-through;
}
.mkd .task-list-item.task-list-done > p > .md-emoji {
  opacity: 0.5;
}
.mkd .task-list-item.task-list-done > p > .md-link > a {
  opacity: 0.6;
}
.mkd .task-list-item > input {
  -webkit-appearance: initial;
  display: block;
  position: absolute;
  border: 1px solid #1a2847;
  border-radius: 0.25rem;
  margin-left: -1.5rem;
  height: 1.2rem;
  width: 1.2rem;
  transition: border-color 0.3s;
  background-color: unset;
}
.mkd .task-list-item > input:focus {
  outline: none;
  box-shadow: none;
}
.mkd .task-list-item > input:hover {
  border-color: #1a2847;
}
.mkd .task-list-item > input[checked]::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 60%;
  width: 2px;
  transform: rotate(40deg);
  background: #1a2847;
}
.mkd .task-list-item > input[checked]::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 25%;
  height: 30%;
  width: 2px;
  transform: rotate(-40deg);
  background: #1a2847;
}
.mkd pre.md-fences,
.mkd pre.md-meta-block,
.mkd .md-rawblock-control:not(.md-rawblock-tooltip) .md-rawblock-input {
  padding: 12px;
  padding-top: 6px;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 6px;
  color: #f8f8f2;
  background: #272822;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
.mkd pre.md-fences::before,
.mkd pre.md-meta-block::before,
.mkd .md-rawblock-control:not(.md-rawblock-tooltip) .md-rawblock-input::before {
  content: "";
  display: block;
  background-image: url("");
  height: 30px;
  width: 100%;
  margin-bottom: -7px;
  background-size: 40px;
  background-repeat: no-repeat;
}
.mkd .cm-s-inner .cm-comment {
  color: #8292a2;
}
.mkd .cm-s-inner .cm-property,
.mkd .cm-s-inner .cm-tag {
  color: #f92672;
}
.mkd .cm-s-inner .cm-bracket,
.mkd .cm-s-inner .cm-punctuation {
  color: #f8f8f2;
}
.mkd .cm-s-inner .cm-number {
  color: #ae81ff;
}
.mkd .cm-s-inner .cm-qualifier,
.mkd .cm-s-inner .cm-string, .mkd .cm-s-inner .cm-string-2,
.mkd .cm-s-inner .cm-builtin {
  color: #a6e22e;
}
.mkd .cm-s-inner .cm-attribute {
  color: #a6e22e;
}
.mkd .cm-s-inner .cm-operator {
  color: #f8f8f2;
}
.mkd .cm-s-inner .cm-atom,
.mkd .cm-s-inner .cm-keyword {
  color: #66d9ef;
}
.mkd .cm-s-inner .cm-def,
.mkd .cm-s-inner .cm-variable,
.mkd .cm-s-inner .cm-variable-2, .mkd .cm-s-inner .cm-variable-3 {
  color: #f8f8f2;
}
.mkd .cm-s-inner .cm-type {
  color: #cbcb9f;
}

.mkd * {
  color: var(--main-normal-color)
}

.mkd h1,
.mkd h2,
.mkd strong,
.mkd a {
  color: var(--main-txt-color);
}

.mkd h1,
.mkd h2 {
  border-color: var(--main-txt-color);
}
    </style>
    
    <script type="text/javascript">
	var tempTable = document.createElement("ul");
	tempTable.setAttribute("id","listContentTemp");
	
	//定义全局函数
	window.clearList = function(){
		var ListEles = document.getElementById("listContent");
		ListEles.innerHTML = "";
	};
	
	window.clearListTemp = function(){
		tempTable.innerHTML = "";
	}
	
	window.replaceList = function(){
		var ListEles = document.getElementById("listContent");
		ListEles.innerHTML = tempTable.innerHTML;
	}
	
	window.lengthList = function(){
		var ListEles = document.getElementById("listContent");
		return ListEles.childElementCount; 
	}
	
	window.pushTable = function(datas){	
		var liEle = window.createLi(datas);
		tempTable.appendChild(liEle);
	};
	
	window.updateContent = function(datas){
		var liEle = document.getElementById(datas[0]);
		var tempEle = window.createLi(datas);
		liEle.parentNode.replaceChild(tempEle,liEle);
	}
	
	window.removeContent = function(datas){
		var liEle = document.getElementById(datas[0]);
		liEle.remove();
	}
	
	window.createLi = function(datas){
		var isAnimated = document.querySelector(".timeline-event");
		if(isAnimated){
			var liEleClass = "timeline-event";
			var labelEleClass = "timeline-event-icon";
			var timeEleClass = "timeline-event-thumbnail";
		}
		else {
			var liEleClass = "timeline-event-disable";
			var labelEleClass = "timeline-event-icon-disable";
			var timeEleClass = "timeline-event-thumbnail-disable";
		};
		
		var liEle = document.createElement("li");
		liEle.setAttribute("class",liEleClass);
		liEle.setAttribute("id",datas[0])
		liEle.setAttribute("ondblclick","dblFunc()")
		
		var labelEle = document.createElement("label");
		labelEle.setAttribute("class",labelEleClass);
		
		var divEle = document.createElement("div");
		divEle.setAttribute("class","timeline-event-copy");
		
		var timeEle = document.createElement("p");
		timeEle.setAttribute("class",timeEleClass);
		//timeEle.setAttribute("ondblclick","dblFunc()")

		timeEle.innerText = datas[0];
		
		var titleEle = document.createElement("h2");
		titleEle.innerText = datas[1];
		var titleWrapEle = document.createElement("div");
		titleWrapEle.setAttribute("class","mkd")
		titleWrapEle.appendChild(titleEle);
		
		var contentEle = document.createElement("div");
		contentEle.setAttribute("class","mkd")
		contentEle.innerHTML = datas[2];
		
		divEle.appendChild(timeEle);
		divEle.appendChild(titleWrapEle);
		divEle.appendChild(contentEle);
		
		console.log(datas)
		if(datas[3] != 'null'){
			var imgEle = document.createElement("img");
			imgEle.setAttribute("src",datas[3]);
			imgEle.setAttribute("width","100%");
			imgEle.setAttribute("height","auto");
			imgEle.setAttribute("style","max-height:450px; object-fit: scale-down;");
			divEle.appendChild(imgEle)
		}
			
		liEle.appendChild(labelEle);
		liEle.appendChild(divEle);
		return liEle; 
	};
	
	 function setTitle(title){
		document.title = title;
	}
	
	function dblFunc() {
	    let currentLi = event.currentTarget;//取出当前元素
	    let timeIndex = currentLi.getAttribute("id");
	    console.log(timeIndex);
	    //console.log(event);
	    aardio.modifyList(timeIndex);
	};
	
	
	function download() {
		var content = document.documentElement.outerHTML;
    	var blob = new Blob([content], {type: 'text/html'});
    	var url = window.URL.createObjectURL(blob);
    	var a = document.createElement('a');
	
    	a.style = "display: none";
    	a.href = url;
    	a.download = document.title+".html";
    	document.body.appendChild(a);
    	a.click();
	
    	setTimeout(function () {
        	document.body.removeChild(a);
        	window.URL.revokeObjectURL(url);
    	}, 5);
	};
	
	function getHtml(){
		var content = document.documentElement.outerHTML;
		return content; 
	};
	
	
	function Wider(){
		var timelineEle = document.querySelector(".timeline"); 
		timelineEle.style.maxWidth = '110em';
	};

	function Middle(){
		var timelineEle = document.querySelector(".timeline"); 
		timelineEle.style.maxWidth = '90em';
	};
	
	function Smaller(){
		var timelineEle = document.querySelector(".timeline"); 
		timelineEle.style.maxWidth = '70em';
	};
	
	function changeClass(className,oldClass,newClass){
		var objectNodes = document.querySelectorAll(className);
		if(objectNodes){
			objectNodes.forEach((object) => {
				var regExp = new RegExp('(?:^|\\s)' + oldClass + '(?!\\S)', 'g');
    			object.className = object.className.replace( regExp , newClass );
			});			
		};
	}
	function hexToRgba(hex) {
		var rgbaNum = 'rgba(' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + parseInt('0x' + hex.slice(7, 9)) + ',' + parseInt('0x' + hex.slice(1, 3))/255 + ')'
		console.log(rgbaNum);console.log(hex);
  		return rgbaNum;
	}
	function themeSet(themeData){
		const root = document.querySelector(':root');
		root.style.setProperty('--main-bg-color', hexToRgba('#'+themeData[0]));
		root.style.setProperty('--main-txt-color', hexToRgba('#'+themeData[1]));
		root.style.setProperty('--main-hl-color', hexToRgba('#'+themeData[2]));
		root.style.setProperty('--main-normal-color', hexToRgba('#'+themeData[3]));
	}
	
	var currentMouseEle = document.querySelectorAll(":hover"); 
	
	document.addEventListener("contextmenu", (e) => {
		currentMouseEle = document.querySelectorAll(":hover");
  		e.preventDefault();
  		hideMenu(e);
  		showMenu(e);
	});
	
	function showMenu(e) {
		if(currentMouseEle.length>3){
			const menus1 = menuSinglton.getInstance();
  			menus1.style.top = `${e.clientY-20}px`;
  			menus1.style.left = `${e.clientX-6}px`;
  			menus1.style.display = "block";
  			menus1.style.position = "fixed";
  			menus1.style.border = "1px solid #31322c";
  			menus1.style.padding = "6px 3px";
  			menus1.style.fontSize = "large";
  			menus1.style.fontWeight = "600";
  			menus1.style.backdropFilter = "blur(3px)";
  			menus1.style.boxShadow = "6px 6px 3px 3px rgba(122, 123, 120, .3)";
  			menus1.style.color = "#b93a26";
		}
  		else {
  			const menus2 = menuLess.getInstance();
  			menus2.style.top = `${e.clientY-20}px`;
  			menus2.style.left = `${e.clientX-6}px`;
  			menus2.style.display = "block";
  			menus2.style.position = "fixed";
  			menus2.style.border = "1px solid #31322c";
  			menus2.style.padding = "6px 3px";
  			menus2.style.fontSize = "large";
  			menus2.style.fontWeight = "600";
  			menus2.style.backdropFilter = "blur(5px)";
  			menus2.style.boxShadow = "6px 6px 3px 3px rgba(122, 123, 120, .3)";
  			menus2.style.color = "#b93a26";
  		}
	}
	
	function hideMenu(e) {
  		const menus1 = menuSinglton.getInstance();
  		menus1.style.display = "none";
  		const menus2 = menuLess.getInstance();
  		menus2.style.display = "none";
	}
	
	document.addEventListener("click", hideMenu);
	
	const ContextMenuSinglton = function (options) {
  	// 唯一实例
  		let instance;
		
  		// 创建实例方法
  		function createMenu() {
  			const ul = document.createElement("ul");
  			ul.classList.add("custom-context-menu");
  			const { menus } = options;
  			if (menus && menus.length > 0) {
    			for (let menu of menus) {
      				const li = document.createElement("li");
      				li.textContent = menu.name;
      				li.onclick = menu.onClick;
      				ul.appendChild(li);
    			}
  			}
  			const body = document.querySelector("body");
  			body.appendChild(ul);
  			return ul;
  		}
		
  		return {
    		// 获取实例的唯一方式
    		getInstance: function () {
      			if (!instance) {
        			instance = createMenu();
      			}
      			return instance;
    		},
  		};
	};
	
	const ContextMenuLess = function (options) {
  	// 唯一实例
  		let instance;
		
  		// 创建实例方法
  		function createMenu() {
  			const ul = document.createElement("ul");
  			ul.classList.add("custom-context-menu");
  			const { menus } = options;
  			if (menus && menus.length > 0) {
    			for (let menu of menus) {
      				const li = document.createElement("li");
      				li.textContent = menu.name;
      				li.onclick = menu.onClick;
      				ul.appendChild(li);
    			}
  			}
  			const body = document.querySelector("body");
  			body.appendChild(ul);
  			return ul;
  		}
		
  		return {
    		// 获取实例的唯一方式
    		getInstance: function () {
      			if (!instance) {
        			instance = createMenu();
      			}
      			return instance;
    		},
  		};
	};
	
	const menuSinglton = ContextMenuSinglton({
  		menus: [
    		{
      			name: "刷新",
      			onClick: function (e) {
        			aardio.flush();
      			},
    		},
    		{
      			name: "编辑此项",
      			onClick: function (e) {
      			    if(currentMouseEle.length>3){
				    	console.log(currentMouseEle[3]);
				    	let currentMouseEleLi = currentMouseEle[3];
	    				let timeIndex = currentMouseEleLi.getAttribute("id");
	    				console.log(timeIndex);
	    				aardio.modifyList(timeIndex);
      			    };
      			},
    		},
    		{
      			name: "关闭动画",
      			onClick: function (e) {
      			    hideMenu(e);
        			changeClass(".timeline-event","timeline-event","timeline-event-disable");
        			changeClass(".timeline-event-icon","timeline-event-icon","timeline-event-icon-disable");
        			changeClass(".timeline-event-thumbnail","timeline-event-thumbnail","timeline-event-thumbnail-disable");
      			},
    		},
    		{
      			name: "打开动画",
      			onClick: function (e) {
      			    hideMenu(e);
        			changeClass(".timeline-event-disable","timeline-event-disable","timeline-event");
        			changeClass(".timeline-event-icon-disable","timeline-event-icon-disable","timeline-event-icon");
        			changeClass(".timeline-event-thumbnail-disable","timeline-event-thumbnail-disable","timeline-event-thumbnail");
      			},
    		},
    		{
      			name: "显示范围：宽",
      			onClick: function (e) {
      			    hideMenu(e);
        			Wider();
      			},
    		},
    		{
      			name: "显示范围：中",
      			onClick: function (e) {
      			    hideMenu(e);
        			Middle();
      			},
    		},
    		{
      			name: "显示范围：窄",
      			onClick: function (e) {
      			    hideMenu(e);
        			Smaller();
      			},
    		},
    		{
      			name: "导出为pdf",
      			onClick: function (e) {
      			    hideMenu(e);
        			window.print();
      			},
    		},
    		{
      			name: "保存为html",
      			onClick: function (e) {
      			    hideMenu(e);
					download();
      			},
    		},
  		],
	});
	
	const menuLess = ContextMenuLess({
  		menus: [
    		{
      			name: "刷新",
      			onClick: function (e) {
        			aardio.flush();
      			},
    		},
    		{
      			name: "关闭动画",
      			onClick: function (e) {
      			    hideMenu(e);
        			changeClass(".timeline-event","timeline-event","timeline-event-disable");
        			changeClass(".timeline-event-icon","timeline-event-icon","timeline-event-icon-disable");
        			changeClass(".timeline-event-thumbnail","timeline-event-thumbnail","timeline-event-thumbnail-disable");
      			},
    		},
    		{
      			name: "打开动画",
      			onClick: function (e) {
      			    hideMenu(e);
        			changeClass(".timeline-event-disable","timeline-event-disable","timeline-event");
        			changeClass(".timeline-event-icon-disable","timeline-event-icon-disable","timeline-event-icon");
        			changeClass(".timeline-event-thumbnail-disable","timeline-event-thumbnail-disable","timeline-event-thumbnail");
      			},
    		},
    		{
      			name: "显示范围：宽",
      			onClick: function (e) {
      			    hideMenu(e);
        			Wider();
      			},
    		},
    		{
      			name: "显示范围：中",
      			onClick: function (e) {
      			    hideMenu(e);
        			Middle();
      			},
    		},
    		{
      			name: "显示范围：窄",
      			onClick: function (e) {
      			    hideMenu(e);
        			Smaller();
      			},
    		},
    		{
      			name: "导出为pdf",
      			onClick: function (e) {
      			    hideMenu(e);
        			window.print();
      			},
    		},
    		{
      			name: "保存为html",
      			onClick: function (e) {
      			    hideMenu(e);
					download();
      			},
    		},
  		],
	});
	
	document.onkeydown = function (e) {
    	var key = e.keyCode;
    	//便于说明，下面代码使用多个if，应用时可使用"||"合并
    	if (key == 116) {
        	//禁用F5刷新
        	return false;
    	} else if(event.ctrlKey && key==82){
        	//禁用ctrl+R刷新
        	return false;
    	}
	};
</script>
</head>
<body>
	<ul id="listContent" class="timeline"><li class="timeline-event-disable" id="2024年03月14日星期四-22:32:59" ondblclick="dblFunc()"><label class="timeline-event-icon-disable"></label><div class="timeline-event-copy"><p class="timeline-event-thumbnail-disable">2024年03月14日星期四-22:32:59</p><div class="mkd"><h2>1</h2></div><div class="mkd"><p>2</p>
</div></div></li><li class="timeline-event-disable" id="2024年03月14日星期四-22:33:01" ondblclick="dblFunc()"><label class="timeline-event-icon-disable"></label><div class="timeline-event-copy"><p class="timeline-event-thumbnail-disable">2024年03月14日星期四-22:33:01</p><div class="mkd"><h2>3</h2></div><div class="mkd"><p>4</p>
</div></div></li><li class="timeline-event-disable" id="2024年03月14日星期四-22:33:03" ondblclick="dblFunc()"><label class="timeline-event-icon-disable"></label><div class="timeline-event-copy"><p class="timeline-event-thumbnail-disable">2024年03月14日星期四-22:33:03</p><div class="mkd"><h2>5</h2></div><div class="mkd"><p>6</p>
</div></div></li><li class="timeline-event-disable" id="2024年03月14日星期四-23:04:02" ondblclick="dblFunc()"><label class="timeline-event-icon-disable"></label><div class="timeline-event-copy"><p class="timeline-event-thumbnail-disable">2024年03月14日星期四-23:04:02</p><div class="mkd"><h2>7</h2></div><div class="mkd"><p>8</p>
</div></div></li></ul>  

</body></html>